<template>
	<view>
		<view class="news_list_box">
			<h4 class="public_title">城发快讯</h4>
			<view class="news_list" v-for="(item,idx) in jsonData" :key="idx" @click="goDetail(item)">
				<h2>{{item.title}} </h2>
				<span> 更多 》</span>
				<image class="one" :src="item.thumb" mode="aspectFill" alt=""></image>
			</view>
			<view class="empty" v-if="jsonData.length == 0">
				<u-empty mode="data" text="暂无数据"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jsonData: [],
				allpage: 0,
				page: 1,
				limit: 5,
			}
		},
		onLoad() {
			this.getIndex();
		},
		onReachBottom() {
			var _this = this;
			console.log(this.allpage);
			if (this.allpage > this.jsonData.length) {
				_this.getIndex();
			} else {
				_this.ending = true;
			}
		},
		methods: {

			//获取数据
			getIndex() {
				uni.showLoading({
					title: "获取中…"
				})
				uni.$u.http.post("/news/index", {
					class_id: 1,
					limit: this.limit,
					page: this.page
				}).then((res) => {
					if (res.code == 200) {
						this.allpage = res.data.total;
						if (this.page == 1) {
							this.jsonData = res.data.data;
							this.page++;
						} else {
							this.jsonData = this.jsonData.concat(res.data.data);
							if (res.data.data.length >= 1) {
								this.page++;
							}
						}
					}
					uni.hideLoading();
				})
			},

			goDetail(ele) {
				console.log(ele.urls);
				if (ele.urls) {
					// #ifdef MP-WEIXIN
					//const wx = uni.$mp.weixin;
					wx.openOfficialAccountArticle({
						url: ele.urls, // 此处填写公众号文章连接
						success: res => {},
						fail: res => {}
					})
					// #endif
					// #ifdef H5
					window.open(ele.urls, '_blank');
					// #endif
				} else {
					uni.navigateTo({
						url: "/pages/index/news_det?id=" + ele.id
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.empty {
		padding: 30rpx 0;
	}

	.news_list_box {
		padding: 20rpx;

		h4 {
			font-weight: bold;
		}
	}

	.public_title {
		line-height: 60rpx;
		font-size: 36rpx;
	}

	.news_list {
		border-bottom: 2rpx solid #ccc;
		position: relative;
		margin: 20rpx 0;

		.one {
			width: 100%;
			height: 290rpx;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
		}

		h2 {
			font-weight: normal;
			font-size: 28rpx;
			line-height: 48rpx;
			height: 48rpx;
			padding-right: 120rpx;
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			margin-bottom: 20rpx;
		}

		span {
			display: block;
			position: absolute;
			right: 0;
			font-size: 20rpx;
			top: 0rpx;
			line-height: 48rpx;
			color: #999;
		}

	}

	.news_list:last-child {
		border-bottom: none;
	}
</style>